<script setup lang="ts">
import { FormValidateRules } from './conf'

const {
  isAdd = false,
  saveSuccess = async () => {},
  remove = async () => {}
} = defineProps<{
  isAdd?: boolean
  saveSuccess?: () => Promise<void>
  remove?: (ids: string[]) => Promise<void>
}>()

const form = defineModel<ScriptNodeConfType>('form', { default: genScriptNodeConf() })

const isBtnCollapse = ref(false)

const formRef = ref()
const validate = async () => await formRef.value.validate()
const [isSaving, saveScriptNodeConf] = genSubmitFormHandler({
  beforeSubmit: validate,
  handleSubmit: async () => {
    // 使用生成的默认脚本节点配置，将表单中的数据转换到默认脚本节点配置中，防止流程图节点中的其他无需保存数据被保存
    const scriptNodeConf = genScriptNodeConf()
    ObjUtil.convert(toRawDeep(form.value), scriptNodeConf)
    if (form.value._id) scriptNodeConf._id = form.value._id
    return await api.saveScriptNodeConfs([scriptNodeConf])
  },
  afterSubmit: async (res) => {
    if (res.status) {
      form.value.id = res.data._id
      await saveSuccess()
    }
    tipByResult(res)
  }
})

const [isDeleting, delScriptNodeConf] = genSubmitFormHandler({
  handleSubmit: async () => await remove([form.value._id!])
})
</script>

<template>
  <div class="box-border w-full h-full p-2 flex flex-col items-stretch">
    <div class="pb-2">
      <div class="p-2 pt-1 font-500">
        {{ isAdd ? '新增节点' : '编辑节点' }}
      </div>
      <el-divider />
    </div>
    <el-scrollbar class="flex-1">
      <el-form
        ref="formRef"
        :model="form"
        class="min-w-[225px]"
        label-width="70px"
        :rules="FormValidateRules"
      >
        <el-form-item label="名称" prop="data.label">
          <el-input v-model="form.data.label" clearable />
        </el-form-item>
        <el-form-item label="坐标" prop="position" required>
          <div class="flex gap-2 flex-wrap">
            <el-input-number v-model="form.position.x" :precision="0">
              <template #prefix>x</template>
            </el-input-number>
            <el-input-number v-model="form.position.y" :precision="0">
              <template #prefix>y</template>
            </el-input-number>
          </div>
        </el-form-item>
        <el-form-item label="开始节点">
          <div class="flex items-center">
            <el-switch v-model="form.data.start" />
            <tip-text
              tip="同一个脚本中允许存在多个开始节点，在脚本执行过程中，会根据开始节点的个数，构建若干个执行流程队列，每个队列的执行先后顺序由开始节点的优先级决定"
            />
          </div>
        </el-form-item>
        <el-form-item label="结束节点">
          <div class="flex items-center">
            <el-switch v-model="form.data.end" />
            <tip-text
              tip="同一个脚本中允许存在多个结束节点，在脚本执行过程中，如果目前执行的节点为结束节点，那么在其执行完毕后会停止其所在流程队列的执行"
            />
          </div>
        </el-form-item>
        <el-form-item label="命令">
          <el-input type="textarea" v-model="form.data.cmd" />
        </el-form-item>
        <el-form-item label="节点颜色">
          <el-color-picker v-model="form.data.color" />
        </el-form-item>
      </el-form>
    </el-scrollbar>
    <el-divider />
    <div class="pt-1 flex justify-between">
      <div>
        <del-btn
          v-if="!isAdd"
          :btn-props="{ type: 'danger', text: false, loading: isDeleting, disabled: isDeleting }"
          :confirm="() => delScriptNodeConf()"
        />
      </div>
      <s-contact
        :contact="[() => (isBtnCollapse = true)]"
        :restore="[() => (isBtnCollapse = false)]"
      >
        <add-btn
          v-if="isAdd"
          text="新增节点"
          :collapse="isBtnCollapse"
          :btn-props="{ loading: isSaving, disabled: isSaving }"
          :click="saveScriptNodeConf"
        />
        <save-btn
          v-else
          text="保存节点"
          :collapse="isBtnCollapse"
          :btn-props="{ loading: isSaving, disabled: isSaving }"
          :click="saveScriptNodeConf"
        />
      </s-contact>
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
